<template>
	<view class="page-box">
		<view class="flex-box top-box">
			<!-- 左边返回按钮 -->
			<view @click="toBack">
				<uni-icons type="arrowleft" size="24"></uni-icons>
			</view>
			<!-- 目录和书签 -->
			<view class="flex-center label-boxs">
				<view class="font-size-label" :class="currentIndex == index ? 'active' : ''" @click="changeData(index)" v-for="(label,index) in labels" :key="index">{{label.name}}</view>
			</view>
			<view>
				<uni-icons type="arrowthindown" size="24"></uni-icons>
			</view>
		</view>
		
		<view class="data-boxs">
			<scroll-view scroll-y="true" class="scroll-Y scroll-view-box" scroll-top="0">
				<!-- 目录 -->
				<view v-show="ismenu" :class="currentChapter == item.sort ? 'active' : ''" @click="selectChapter(item.id)" v-for="(item,index) in datas" :key="index" class="content-box scroll-view-item">
				{{item.chapter}}
				</view>
				
				<!-- 书签 -->
				<view v-show="!ismenu">
					暂无功能
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>

	export default {
		data() {
			return {
				currentIndex: 0,
				left: 0,
				labels: [
					{
						'name': '目录'
					},{
						'name': '书签'
					},
				],
				datas: [],
				currentChapter: 1,
				chapter: '',
				bookmarks: '',
				ismenu: true,
				
				params: ''
			}
		},
		
		async onLoad(options) {
			/*
				两种来源，1是内容页来的，2是详情页来的
				两个参数，1是nid，2sort（第几章）
				根据nid获取目录
				根据sort高亮哪个章节
			*/
			this.params = options
			this.currentChapter = options.currentChapter

			
			const chapter = await this.myApi({
				url: '/api/chapters',
				domain: true,
				data: {nid: this.params.nid}
			})
			
			
			this.datas = chapter.data
			
		},
		
		onReady() {
			
		},
		
		
		methods: {
			toBack() {
				uni.navigateBack({
					
				})
			},
			
			selectChapter(cid) {
				// 不设置缓存重新加载内容页
				uni.redirectTo({
					url: './novel-detail?cid=' + cid + '&nid=' + this.params.nid + '&source=1'
				})
			},
			
			changeData(index) {
				this.currentIndex = index
				if(index == 0) {
					this.ismenu = true
				} else {
					this.ismenu = false
				}
			}
		},
		
		beforeDestroy() {
			
		}
	}
</script>

<style>
	/* page {
		height: 100vh;
		overflow: hidden;
	} */
	
	.page-box {
		
	}
	
	.top-box {
		padding: 50rpx 30rpx 0;
		background-color: #F3F0E8;
	}
	
	
	.flex-box {
		display: flex;
		justify-content: space-between;
		align-items: center;
		text-align: center;
		height: 100rpx;
	}
	
	.label-boxs {
		/* width: 60%; */
	}
	.flex-center {
		display: flex;
		justify-content: space-around;
	}
	
	.font-size-label {
		font-size: 36rpx;
		padding: 0 30rpx;
	}
	
	.active {
		font-weight: bold;
		color: #ffaa7f;
	}
	.data-boxs {
		padding: 0 30rpx;
	}
	
	.scroll-view-box {
		height: calc(100vh - 150rpx);
		/* background-color: #F3F0E8; */
		/* padding: 0 30rpx; */
	}
	
	.scroll-view-item {
		font-size: 32rpx;
		padding: 25rpx 0;
	}
</style>
